window.onload = function() {
    let username = document.getElementById("username")
    let password = document.getElementById("password")
    console.log(username.value)

    username.addEventListener("input", (e) => {
        console.log("正在输入", e.target.value)
    })

    let btn = document.querySelector("button")
    btn.addEventListener("click", (e) => {
        e.preventDefault()

        let name = username.value
        let passd = password.value

        // let xhr = new XMLHttpRequest()
        // xhr.open("Get", "http://172.18.208.155:8080/login" + "?username=" + name + "&password=" + passd, true) //打开链接通道
        //     //回调函数，异步请求的状态监听
        // xhr.onreadystatechange = function() {
        //readyState:
        //0:请求已经创建，但是还没有调用open
        //1:调用了open，但是还没有发送
        //2：服务器返回相应头
        //3：正在读取响应体
        //4：请求完成，相应可用
        //     if (xhr.readyState === 4 && xhr.status === 200) {
        //         console.log("请求成功")
        //             //4.得到响应
        //         console.log(xhr.responseText)
        //     }
        // }


        //这是一条平凡的分割线
        //${处理特殊字符}

        //1.
        // const url = `http://172.18.208.155:8080/login?username=${encodeURIComponent(name)}&password=${encodeURIComponent(passd)}`;
        // fetch(url, { method: 'GET' }) 
        //2.
        fetch("http://172.18.208.155:8080/login" + "?username=" + name + "&password=" + passd)

        //会返回promise，一个结果.上面两个都可以
        .then(res => {
                if (!res.ok) { //fetch的快捷判断，200到299正常，404跟500不正常
                    throw new Error("fail")
                }
                return res.text(); //不能用json，用json就fail了。json是个格式，返回纯数据,将服务器返回的 JSON 格式字符串解析为js对象
            }) //收到结果后干什么
            .then(data => {
                console.log("success")
            })
            .catch(err => { //err错误对象
                console.error("FAIL")
            })

        //分割线-------------------------------------
        let promise = new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest()
            xhr.open("Get", "http://172.18.208.155:8080/login" + "?username=" + name + "&password=" + passd)
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log("hh")
                    resolve(xhr.responseText)
                }
            }

            console.log("开始发送请求")
                //发送请求
            xhr.send()
            console.log("这是发送请求后")
            console.log("这是发送请求后后")

        })

        promise.then((res) => {
            console.log("fine")
            console.log(res)
        }).catch((err) => {
            console.log("not fine")
            console.log(err)
        }).finally(() => {
            console.log("ok,whatever it's fail or success,it's the end")
        })
    })
}